<template>
  <view class="login">
    <view class="welcome">
      <text> </text>
      <text>忘记密码</text>
    </view>

    <view class="form-body">
      <u--form labelPosition="left" label-width="60px" ref="formRef" :model="formData">
        <!-- 手机号 -->
        <u-form-item label="手机号" prop="mobile">
          <u--input
            class="f-input"
            type="number"
            border="bottom"
            placeholder="请输入手机号"
            clearable
            v-model="formData.mobile"
          />
        </u-form-item>
        <!-- 验证码 -->
        <u-form-item label="验证码" prop="smsCode">
          <u-input placeholder="请输入验证码" border="bottom" clearable v-model="formData.smsCode">
            <template slot="suffix">
              <u-code
                ref="uCode"
                changeText="X秒重新获取"
                :seconds="seconds"
                @start="startCode"
                @end="endCode"
                @change="text => codeBtnText = text">
              </u-code>
              <u-button
                type="primary"
                :custom-style="{ height: '32px' }"
                :text="codeBtnText"
                :disabled="!canGetCode"
                @click="getCode">
              </u-button>
            </template>
          </u-input>
        </u-form-item>
        <!-- 密码 -->
        <u-form-item label="新密码" prop="newPassword">
          <u-input
            placeholder="请输入新密码"
            border="bottom"
            :password="lockPassword"
            v-model="formData.newPassword"
          >
            <template slot="suffix">
              <u-icon
                name="eye-off"
                :name="lockPassword ? 'eye-off' : 'eye'"
                color="#666"
                size="42"
                @click="lockPassword = !lockPassword">
              </u-icon>
            </template>
          </u-input>
        </u-form-item>

        <u-button
          type="primary"
          text="提交"
          :disabled="loading"
          :custom-style="{ margin: '80rpx 0 0' }"
          @click="onSubmit">
        </u-button>
      </u--form>

    </view>
    
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import loginMixin from '@/mixins/login'
  import smsCode from '@/mixins/smsCode'
  
  export default {
    mixins: [loginMixin, smsCode],
    data() {
      return {
        formData: {
          mobile: '',
          newPassword: '',
          smsCode: '',
        },
        // 提交中
        loading: false,
        
        // 是否同意
        agree: [],
        
        // 验证规则
        rules: {
          mobile: [
            {
              required: true, 
              message: '请输入手机号',
              trigger: ['change','blur'],
            },
            {
              validator: (rule, value, callback) => {
                return uni.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              trigger: ['change','blur'],
            }
          ],
          smsCode: [
            {
              required: true,
              message: '请输入短信验证码',
            }
          ],
          newPassword: [
            {
              required: true,
              message: '请输入新密码',
            }
          ]
        },
        
        // 密码可见
        lockPassword: true,
        loginType: 2,
        pageDeviceId: '4825b689-738c-4346-9feb-fea5ad477812'
        
      }
    },
    methods: {
      // 提交
      async onSubmit() {
        if (this.loading) return
        await this.$refs.formRef.validate()
        try {
          this.loading = true
          const { formData } = this
          const res = await this.$request({
            url: '/api-user/app/users/updatePwd',
            data: {
              ...formData,
              deviceId: this.pageDeviceId,
            }
          })
          this.$refs.uToast.show({
            message: res.respMsg,
            position: 'top'
          })
		  if(this.loginType == 1){
			  this.toPhoneLogin()
		  }else{
			  this.toPasswordLogin({ phone: formData.mobile })
		  }
          
        } catch (err) {
          this.$refs.uToast.show({
            message: err.respMsg || '请求失败',
            position: 'top'
          })
        } finally {
          this.loading = false
        }
      },
      
      // 获取短信验证码接口
      async getCodeApi() {
        // const { deviceId } = this
        const { mobile: phone } = this.formData
        return this.$request({
          url: '/api-uaa/validata/smsCode',
          data: {
            deviceId: this.pageDeviceId,
            phone
          }
        })
      },
	  //判断要素跳转
	  async getLoginType() {
	  	const res = await this.$request({
	  		url: '/user-center/loginPageConfig/getType',
	  		method: 'GET',
	  		data: {
	  			client: 4
	  		}
	  	})
	  	this.loginType = res.datas.type ? res.datas.type : 2
	  }
    },
	onLoad() {
        this.getLoginType()
	},
    onReady() {
      this.$refs.formRef.setRules(this.rules)
    }
  }
</script>

<style scoped lang="scss">
  .login {
    padding: 140rpx 65rpx 0;
    height: 100vh;
    background: #fff;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;

    .welcome {
      display: flex;
      flex-direction: column;
      font-size: 48rpx;
      line-height: 2;
    }

  }
</style>